<%- include("../header.ejs")-%>

<el-header style="font-size: 12px">
    <template>
        <el-form :inline="true" label-width="80px">
            <el-form-item label="">
                <el-date-picker v-model="value1" type="month" placeholder="选择月" format="yyyy 年 MM 月 "
                    value-format="yyyy-MM">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
    </template>
</el-header>
<el-main>
    <template>
        <div id="main" style="width: 1200px;height:700px;"></div>
    </template>

</el-main>
<el-footer style="text-align: left; font-size: 12px">
</el-footer>

<%- include("../footer.ejs")-%>

<script>

    new Vue({
        router,
        el: '#app',
        data: {
            form: { start_time: "" },

            value1: "<%- month %>",
            rules: {
                start_time: [
                    { required: true, message: '请输入时间', trigger: 'blur' },
                ],
            },
        },

        created: function () {
            this.search()
        },
        methods: {

            search() {
                var _this = this
                fetch('/api/online/month/' + this.value1).then(response => response.json()).then(json => {

                    var myChart = echarts.init(document.getElementById('main'));

                    var xData = [];
                    var yData = [];

                    for (var i = 0; i < json.length; i++) {
                        xData.push(json[i].created_at + ":00");
                        yData.push(json[i].num);
                    }

                    var option = {
                        tooltip: {
                            trigger: 'axis',
                        },
                        title: {
                            text: '在线人数'
                        },
                        xAxis: {
                            type: 'category',
                            data: xData,
                        },
                        yAxis: {
                            type: 'value',
                            min: 1
                        },
                        series: [{
                            data: yData,
                            type: 'line',
                            smooth: true
                        }]
                    };

                    myChart.setOption(option);
                });
            }
        }
    })

</script>